<script setup lang="ts">
  import { ref, computed } from 'vue';
  // 如果使用的是按需加载，则需要单独引入所需的组件
  import { ElButton } from 'element-plus';

  import { useStore } from 'vuex';
  import BasicComponent from '@/views/DigitalTwin/right/rightRoot.vue';
  import SceneComponent from '@/views/DigitalTwin/right/component/sceneComponent.vue';
  import DataComponent from '@/views/DigitalTwin/right/component/dataComponent.vue';
  import StateComponent from '@/views/DigitalTwin/right/component/stateComponent.vue';
  import AnimationComponent from '@/views/DigitalTwin/right/component/animationComponent.vue';

  const store = useStore();
  const showBasicComponent = store.state.showBasicComponent;
  // 定义所有的标签及其对应值
  const labels = ['基础', '场景', '动画', '数据', '状态'];
  const selectedBox = ref(0);
  // 接收父组件传递的宽度和高度，并设置默认值
  const props = defineProps({
    width: {
      type: String,
      default: '100%',
    },
    height: {
      type: String,
      default: 'auto',
    },
  });
  // 计算容器样式
  const containerStyle = computed(() => ({
    width: props.width,
    height: props.height,
  }));
  // 选择盒子的方法
  const selectBox = (index) => {
    // selectedBox.value = `Box ${labels[index].toUpperCase()}`;
    selectedBox.value = index;
    emit('selectComponent', index);
  };
</script>

<template>
  <div class="header">
    <el-button v-for="(label, index) in labels" :key="index" @click="selectBox(index)">
      <span class="span">{{ label }}</span>
    </el-button>
    <!--    <SceneComponent v-if="selectedBox == 0"></SceneComponent>-->
    <!--    <DataComponent v-if="selectedBox.value === 2"></DataComponent>-->
    <!--    <StateComponent v-if="selectedBox.value === 3"></StateComponent>-->
    <!--    <AnimationComponent v-if="selectedBox.value === 1"></AnimationComponent>-->
    <!-- 当前显示的组件 -->
  </div>

  <!-- <el-row type="flex" justify="space-around" align="middle" class="header">

  </el-row> -->
</template>

<style scoped>
  .container {
    display: flex;
    flex-direction: column;
  }

  .header {
    flex-shrink: 0;
  }

  .content {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    /* background-color: #303648; */
  }

  .box {
    display: flex;
    align-items: center;
    justify-content: center;
    /* background-color: #435486; */
    width: 100%;
    height: 100%;
    color: white; /* 确保文字颜色与背景对比明显 */
  }

  .box img {
    max-width: 100%;
    height: auto;
    border: 1px solid #ccc;
    margin-bottom: 1vh;
  }
</style>
